<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>简历</title>
</head>

<body>
  <div id="c">


  </div>
  <script>
    let u1 = {
      //user的结构
      username: '梁朝伟', // 用户名
      userId: 19318, // 用户id
      theme: 'light', // 主题名
      favorite: '看书', // 爱好
      birthday: '1993-12-28', // 生日
      age: 28, // 年龄
      avatar:
        'https://tva1.sinaimg.cn/large/008i3skNgy1gq9wsodlenj30gc0ji14m.jpg', // 头像
      hometown: '河北省张家口', // 家乡
      // 工作经验
      jobs: [
        {
          company: '北京格致璞科技有限公司',
          from: '2018-09',
          to: '2019-06',
        },
        {
          company: '北京豆网科技有限公司',
          from: '2019-06',
          to: '2019-12',
        },
        {
          company: '值得买科技',
          from: '2019-12',
        },
      ],
      // 技能
      skills: [
        ['css3', '精通'],
        ['javascript', '熟练'],
        ['html', '精通'],
      ],
      // 自我介绍, 要求：
      //    < 要替换成 &lt;
      //    > 要替换成 &gt;
      // XSS
      //    \n要替换成<br/>
      // String.replace(/\n/g, '<br />')

      description: `• 性格<u>严谨</u>，一丝不苟。注重细节。具有大局观和一定的领导组织能力。
         • 对于前沿科技具有浓厚的兴趣，具有一定的创新能力。
         • 勤奋、努力，有志于长期从事相关工作`,
    }

    function toHtml(user) {
      return `<div class="user theme-${user.theme}">
        <table border="1">
          <tr>
            <td>用户名</td>
            <td>${user.username}
              <a href="detail?userId=${user.userId}">[详情页]</a></td>
          </tr>
          <tr>
            <td>照片</td>
            <td><img src='${user.avatar}' style="width: 180px;"/></td>
          </tr>
          <tr>
            <td>生日</td>
            <td>${user.birthday}</td>
          </tr>
          <tr>
            <td>年龄</td>
            <td>${user.age}</td>
          </tr>
          <tr>
            <td>家乡</td>
            <td>${user.hometown}</td>
          </tr>
          <tr>
            <td>爱好</td>
            <td>${user.favorite}</td>
          </tr>
          <tr>
            <td>工作经验</td>
            <td>
              <div>
                <ul>
                  ${user.jobs.map(function (job) {
        return job.to ?
          `<li>${job.company}(从${job.from}到${job.to})</li>` : `<li>${job.company}(从${job.from}至今)</li>`
      }).join('')
        }

                </ul>
              </div>
            </td>
          </tr>
          <tr>
            <td>工作技能</td>
            <td>
              <ul>
                ${user.skills.map(function (skill) {
          return `<li>${skill[0]}: ${skill[1]}</li>`
        }).join('')
        }
              </ul>
            </td>
          </tr>
          <tr>
            <td>自我介绍</td>
            <td>${user.description
          .replaceAll('>', '&gt;')
          .replaceAll('<', '&lt;')
          .replaceAll('\n', '<br/>')
        }
            </td>
          </tr>
        </table>
      </div>`
    }

    function render() {
      document.getElementById('c').innerHTML =
        toHtml(u1)
    }
    render()

    console.log([u1, u1, u1].map(toHtml))

  </script>


</body>

</html>